{% extends 'common/base.html' %}
{% load staticfiles %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'jQueryTimeAxis/css/jquery.eeyellow.Timeline.css' %}"/>
{% endblock %}
{% block javascript %}
    <script type="text/javascript" src="{% static 'jQueryTimeAxis/js/jquery.eeyellow.Timeline.js' %}"></script>
{% endblock %}
{% block style %}
    <style>
        .pull-right {
            margin-left: 20px;
            width: 90%;
        }

        .events {
            right: 10px;
        }
    </style>
{% endblock %}
{% block section %}

    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th colspan="2">合理化建议表</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>创建人:</th>
            <td>{{ suggest.create_user.username }}</td>
        </tr>
        <tr>
            <th>小组成员:</th>
            <td>
                {% for foo in member %}
                    {{ foo.username }}|
                {% endfor %}
                {{ suggest.member }}</td>
        </tr>
        <tr>
            <th>创建时间:</th>
            <td>{{ suggest.create_at }}</td>
        </tr>
        <tr>
            <th>创建人:</th>
            <td>{{ suggest.create_user.username }}</td>
        </tr>
        <tr>
            <th>流程状态:</th>
            <td>{{ suggest.get_state_display }}</td>
        </tr>
        <tr>
            <th>目前状况:</th>
            <td>{{ suggest.current_situation }}</td>
        </tr>
        <tr>
            <th>解决方案:</th>
            <td>{{ suggest.proposed_solution }}</td>
        </tr>
        <tr>
            <th>项目收益:</th>
            <td>{{ suggest.benefit }}</td>
        </tr>
        <tr>
            <th>需要资源:</th>
            <td>{{ suggest.resource }}</td>
        </tr>
        {% if flow_audit.is_audit and suggest.state == 2 %}
            <tr>
                <th colspan="2">流程审批-{{ suggest.current_node.flow_node_name }}</th>
            </tr>
            <tr>
                <td colspan="2">
                    <form action="/suggest_audit/" method="post" style="padding-left: 20px;">
                        {% csrf_token %}
                        <input type="hidden" name="flow_node" value="{{ suggest.current_node.id }}">
                        <input type="hidden" name="suggest" value="{{ suggest.id }}">
                        {% for foo in flow_audit.operations %}
                            {% if operation == 1 %}
                                {% if suggest.create_user == request.user %}
                                    <div class="form-group">
                                        <label for="operation-{{ foo.id }}">
                                            <input id="operation-{{ foo.id }}" type="radio" value="{{ foo.id }}"
                                                   name="operation">
                                            {{ foo.get_name_display }}
                                        </label>
                                    </div>
                                {% endif %}

                            {% else %}
                                <div class="form-group">
                                    <label for="operation-{{ foo.id }}">
                                        <input id="operation-{{ foo.id }}" type="radio" value="{{ foo.id }}"
                                               name="operation">
                                        {{ foo.get_name_display }}
                                    </label>
                                </div>
                            {% endif %}

                        {% endfor %}
                        <div class="form-group">
                                <textarea type="text" placeholder="请填写审批意见..." name="audit_suggest"
                                          style="width:600px;"></textarea>
                        </div>
                        <input type="submit" value="确定" class="btn btn-default btn-success">

                    </form>
                </td>
            </tr>
        {% endif %}

        <tr>
            <th colspan="2">流程树</th>
        </tr>
        <tr>
            <td colspan="2">
                <div class="VivaTimeline" style="margin-left: -50%;">
                    <dl>
                        {% for foo in flow_node_list %}

                            <dt>{{ foo.node_name }}</dt>
                            <dd class="pos-right clearfix">
                                <div class="circ"></div>
                                <div class="time">{{ foo.flow_audit_time }}</div>
                                <div class="events">
                                    <div class="events-header">
                                        {{ foo.flow_audit_operation.get_name_display }}
                                    </div>

                                    {% if foo.flow_audit %}
                                        <div class="events-body" style="background: red;color:#fff;">
                                            <div class="row">
                                                <div class="col-md-6 pull-left">
                                                    <label>审批人:</label>{{ foo.flow_audit_create_user }}<br>
                                                    <label>审批意见:</label>{{ foo.flow_audit_suggest }}
                                                </div>
                                            </div>
                                        </div>
                                    {% else %}
                                        <div class="events-body" style="background:green;color:#fff;">
                                            <div class="row">
                                                <div class="col-md-6 pull-left">
                                                    <label>待审批人:</label>
                                                    {% for roles in foo.flow_node_roles %}
                                                        {{ roles.username }}|
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}


                                </div>
                            </dd>

                        {% endfor %}
                    </dl>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    {% block script %}
        <script type="text/javascript">
            $(document).ready(function () {
                $('.VivaTimeline').vivaTimeline({
                    carousel: true,
                    carouselTime: 3000
                });
            });
        </script>
    {% endblock %}

{% endblock %}